/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,TextArea, Input,CCell, Table, TableBody, TableRow, TableHead, Cell,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {calcAverageArrObj, floatInterception, tableSetInp} from "../../../common/tool";
import {RepLink} from "../../common/base";

export const config运行速度=[ ['主升速表','主起升机构起升速度'],['主降速表','主起升机构下降速度'],['大车速表','大车运行速度'],['变幅速表','变幅速度'],
                   ['回转速表','回转速度'],['吊回速表','吊具回转速度'] ];
interface Props  extends InternalItemProps{
    config: any[];
    sseq: number;
}
export const itemA速度 = ['速度备注'];
// 运行速度s.forEach(([name, title], i: number) => {
//     itemA速度.push(name+'表', name+'表r');
// });
/*'监风速', 结论非法[object Object] 同名报错：该改存储名 监风速o ！
* */
export const MoveSpeed =
    React.forwardRef((
        {children, show, alone = true, refWidth,label,config,sseq}: Props, ref
    ) => {
        const config上 = config.slice(0, sseq);
        const config下 = config.slice(sseq);
        const itemA = React.useMemo(() => {
            let items: string[]=[];
            config.forEach(([name,title], i:number)=>{
                items.push(name+'',  name+'r');
            });
            return [...items, ...itemA速度];
        }, [config]);
        const [getInpFilter] = useMeasureInpFilter(null, itemA,);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}</Text>
                <Text variant="h5">前 {config上.length} 个项目: 距离（m）{'>>'}</Text>
                <div css={{display: 'flex', margin: 'auto'}}>
                    <div css={{display: 'inline-block', margin: 'auto'}}>
                        {config上.map(([name,title], t: number) => {
                            const avspeed=calcAverageArrObj(inp?.[name],(row)=>{return row?.d/row?.t},2);
                            return <React.Fragment key={t}>
                                <Text variant="h5">{t+1},&nbsp; {title} :</Text>
                                {(new Array(3)).fill(null).map((_, i: number) => {
                                    let o = inp?.[name]?.[i];
                                    const itspd = o?.d / o?.t;
                                    return <div key={i}>
                                        <Text>&nbsp; {i + 1} 次: </Text>
                                        距离
                                        <Input value={o?.d || ''} size={4}
                                               style={{display: 'inline-flex', width: 'unset'}}
                                               onChange={e => tableSetInp(name, i, inp, setInp, 'd', e.currentTarget.value || undefined)}/>
                                        (m)，时间
                                        <Input value={o?.t || ''} size={4}
                                               style={{display: 'inline-flex', width: 'unset'}}
                                               onChange={e => tableSetInp(name, i, inp, setInp, 't', e.currentTarget.value || undefined)}/>
                                        (min)，速度={!isNaN(itspd) && floatInterception(itspd, 2)} (m/min)。
                                    </div>;
                                })}
                                <Text variant="h6" css={{display: 'inline-flex'}}>平均速度= {avspeed} m/min, {title}-检验结果：</Text>
                                <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                                    <SelectHookfork value={(inp?.[name + 'r']) || ''}
                                                    onChange={e => setInp({...inp, [name + 'r']: e.currentTarget.value || undefined})}/>
                                </div>
                            </React.Fragment>;
                        })}
                    </div>
                </div>
                <Text variant="h5">后 {config下.length} 个项目: 圈数(r) {'>>'}</Text>
                <div css={{display: 'flex', margin: 'auto'}}>
                    <div css={{display: 'inline-block', margin: 'auto'}}>
                        {config下.map(([name,title], t: number) => {
                            const avspeed=calcAverageArrObj(inp?.[name],(row)=>{return row?.d/row?.t},1);
                            return <React.Fragment key={t}>
                                <Text variant="h5">{sseq+t+1},&nbsp; {title} :</Text>
                                {(new Array(3)).fill(null).map((_, i: number) => {
                                    let o = inp?.[name]?.[i];
                                    const itspd = o?.d / o?.t;
                                    return <div key={i}>
                                        <Text>&nbsp; {i + 1} 次: </Text>
                                        圈数
                                        <Input value={o?.d || ''} size={4}
                                               style={{display: 'inline-flex', width: 'unset'}}
                                               onChange={e => tableSetInp(name, i, inp, setInp, 'd', e.currentTarget.value || undefined)}/>
                                        (r)，时间
                                        <Input value={o?.t || ''} size={4}
                                               style={{display: 'inline-flex', width: 'unset'}}
                                               onChange={e => tableSetInp(name, i, inp, setInp, 't', e.currentTarget.value || undefined)}/>
                                        (min)，速度={!isNaN(itspd) && floatInterception(itspd, 1)} (r/min)。
                                    </div>;
                                })}
                                <Text variant="h6" css={{display: 'inline-flex'}}>平均速度= {avspeed} r/min, {title}-检验结果：</Text>
                                <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                                    <SelectHookfork value={(inp?.[name + 'r']) || ''}
                                                    onChange={e => setInp({...inp, [name + 'r']: e.currentTarget.value || undefined})}/>
                                </div>
                            </React.Fragment>;
                        })}
                    </div>
                </div>
                备注：
                <TextArea  value={inp?.速度备注 ||''} rows={3}
                           onChange={e => setInp({ ...inp, 速度备注: e.currentTarget.value||undefined}) } />
                {children}
            </InspectRecordLayout>
        );
} );

export const MoveSpeedVw= ({children, orc, rep,label,config,sseq } : { orc: any, rep: any,label:any, children?: any,config:any[],sseq:number}
) => {
    const config上 = config.slice(0, sseq);
    const config下 = config.slice(sseq);
    return <>
        <div css={{"@media print": {paddingBottom: '7rem', pageBreakInside: 'avoid'}}}>
            {typeof label === 'object' ? <>{label}</>
                :
                <Text variant="h4" css={{
                    marginTop: '1rem',
                }}>{label}</Text>
            }
        </div>
        <Table id={'MoveSpeed'} fixed={ ["%", "5%", "10%", "10%", "11.5%", "15.5%", "8.5%"] }
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-7rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell>项目</CCell><CCell>次数</CCell><CCell>距离(m)</CCell><CCell>时间(min)</CCell>
                    <CCell>速度(m/min)</CCell><CCell>平均速度(m/min)</CCell><CCell>检验结果</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'MoveSpeed'}>
                    {config上.map(([name, title], t: number) => {
                        const avspeed = calcAverageArrObj(orc?.[name], (row) => {
                            return row?.d / row?.t
                        }, 2);
                        return <React.Fragment key={t}>
                            {(new Array(3)).fill(null).map((_, d: number) => {
                                const o = orc?.[name]?.[d];
                                const itspd = o?.d / o?.t;
                                return <TableRow key={d}>
                                    {0 === d && <CCell rowSpan={3}>{title}</CCell>}
                                    <CCell>{d + 1}</CCell>
                                    <CCell>{o?.d}</CCell>
                                    <CCell>{o?.t}</CCell>
                                    <CCell>{!isNaN(itspd) && floatInterception(itspd, 2)}</CCell>
                                    {0 === d && <CCell rowSpan={3}>{avspeed}</CCell>}
                                    {0 === d && <CCell rowSpan={3}>{orc?.[name + 'r']}</CCell>}
                                </TableRow>;
                            })}
                        </React.Fragment>;
                    })}
                </RepLink>
            </TableBody>
        </Table>
        <div css={{"@media print": {paddingBottom: '4.5rem', pageBreakInside: 'avoid'}}} />
        <Table fixed={ ["4.5%","%", "5%", "10%", "10%", "11.5%", "15.5%", "8.5%"] }
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4.5rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell colSpan={2}>项目</CCell><CCell>次数</CCell><CCell>圈数(r)</CCell><CCell>时间(min)</CCell>
                    <CCell>速度(r/min)</CCell><CCell>平均速度(r/min)</CCell><CCell>检验结果</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'MoveSpeed'}>
                    {config下.map(([name, title], t: number) => {
                        const avspeed = calcAverageArrObj(orc?.[name], (row) => {
                            return row?.d / row?.t
                        }, 1);
                        return <React.Fragment key={t}>
                            {(new Array(3)).fill(null).map((_, d: number) => {
                                const o = orc?.[name]?.[d];
                                const itspd = o?.d / o?.t;
                                return <TableRow key={d}>
                                    {0 === d && <CCell rowSpan={3} colSpan={2}>{title}</CCell>}
                                    <CCell>{d + 1}</CCell>
                                    <CCell>{o?.d}</CCell>
                                    <CCell>{o?.t}</CCell>
                                    <CCell>{!isNaN(itspd) && floatInterception(itspd, 1)}</CCell>
                                    {0 === d && <CCell rowSpan={3}>{avspeed}</CCell>}
                                    {0 === d && <CCell rowSpan={3}>{orc?.[name + 'r']}</CCell>}
                                </TableRow>;
                            })}
                        </React.Fragment>;
                    })}
                    <TableRow>
                        <CCell>备注</CCell>
                        <Cell colSpan={7}>
                            <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                                {orc.速度备注 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        {children}
    </>;
};
